<template>
    <div class="table">
        <div class="content-common">
           <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
            
             <el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
             <el-col :span="6" style="text-align:right">
           			<el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button>
					<el-button type="primary" icon="download"  @click="daochu()">导出记录</el-button>
             </el-col>
           </el-row>
		   <div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			小区整编表-3-3 {{stnm}}站径流小区基本情况(灌草地)
		   </div>
            <el-table
                :data="tableData"
                border
               
                class="table-common"
              
                header-cell-class-name="table-header"
               
            >
               
               <el-table-column align="center" prop="areaCode" label="小区号"></el-table-column>
                <el-table-column align="center" prop="purpose" label="实验目的"></el-table-column>
				<el-table-column align="center" prop="slope" label="坡度(°)"></el-table-column>
				<el-table-column align="center" prop="slopeLength" label="坡长(m)"></el-table-column>
				<el-table-column align="center" prop="slopeWidth" label="坡宽(m)"></el-table-column>
				<el-table-column align="center" prop="areaSize" label="面积(㎡)"></el-table-column>
				<el-table-column align="center" prop="slopeAspect" label="坡向(°)"></el-table-column>
				<el-table-column align="center" prop="slopeLocation" label="坡位"></el-table-column>
				<el-table-column align="center" prop="soilType" label="土壤类型"></el-table-column>
				<el-table-column align="center" prop="soilThickness" label="土层厚度(cm)"></el-table-column>
				<el-table-column align="center" prop="shrubType" label="灌草种类"></el-table-column>
				<el-table-column align="center" prop="sowingDate" label="播种日期"></el-table-column>
				<el-table-column align="center" prop="sowingType" label="播种方法"></el-table-column>
				<el-table-column align="center" prop="harvestDate" label="收割日期"></el-table-column>
				<el-table-column align="center" prop="biologyYield" label="生物量(kg/h㎡)"></el-table-column>
				<el-table-column align="center" prop="grassYield" label="牧草产量(kg/h㎡)"></el-table-column>
				<el-table-column align="center" prop="coverage" label="盖度(%)"></el-table-column>
				<el-table-column align="center" prop="avgHeight" label="平均高度(cm)"></el-table-column>
				
				
				
				
				<el-table-column align="center" prop="flowDevice" label="测流设备"></el-table-column>
				<el-table-column align="center" prop="remark" label="备注"></el-table-column>
				
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger"   @click="handleDelete(scope.row)"
                            >删除</el-button
                        >
					
						
                    </template>
                </el-table-column>
            </el-table>
			
			
			<el-row type="flex"  justify="end">
			  <el-pagination
			    background
				v-model:currentPage="page.currentPage"
				@current-change="getData"
			    layout="prev,total, pager, next"
			    :total="page.totalSize">
			  </el-pagination>
			</el-row>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="500px">
            <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="top">
				<el-row type="flex" justify="space-between">
				    <el-col :span="7">
						<el-form-item label="小区号" prop="areaCode">
							
							<el-select @change="stcdChange" v-model="form.areaCode" placeholder="小区号">
							    <el-option
							      v-for="item in xiaoqudata"
							      :key="item.areaCode"
							      :label="item.stnm+item.areaCode+'号'"
							      :value="item.areaCode">
							    </el-option>
							  </el-select>
						</el-form-item>
									 
					</el-col>
				    <el-col :span="7">
						<el-form-item label="试验目的" prop="purpose">
							<el-input v-model="form.purpose" placeholder="试验目的"></el-input>
						  
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="坡度(o)" prop="slope">
						      <el-input v-model="form.slope" placeholder="坡度(o)"></el-input>
						  </el-form-item>
									 
					</el-col>
				</el-row>
				<el-row type="flex" justify="space-between">
				   
				    <el-col :span="7">
						<el-form-item label="坡长(m)" prop="slopeLength">
						    <el-input v-model="form.slopeLength" placeholder="坡长(m)"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="坡宽(m)" prop="slopeWidth">
						    <el-input v-model="form.slopeWidth" placeholder="坡宽(m)"></el-input>
						</el-form-item>
									 
					</el-col>
					<el-col :span="7">
						<el-form-item label="面积(㎡)" prop="areaSize">
						    <el-input v-model="form.areaSize" placeholder="面积(㎡)"></el-input>
						</el-form-item>
						
					</el-col>
				</el-row>
				
				<el-row type="flex" justify="space-between">
				    <el-col :span="7">
						<el-form-item label="坡向(o)" prop="slopeAspect">
						    <el-input v-model="form.slopeAspect" placeholder="坡向(o)"></el-input>
						</el-form-item>
									 
					</el-col>
				    <el-col :span="7">
						<el-form-item label="坡位" prop="slopeLocation">
						    <el-input v-model="form.slopeLocation" placeholder="坡位"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="土壤类型" prop="soilType">
						    <el-input v-model="form.soilType" placeholder="土壤类型"></el-input>
						</el-form-item>
									 
					</el-col>
				</el-row>
				<el-row type="flex" justify="space-between">
				   
				    <el-col :span="7">
						<el-form-item label="土层厚度(cm)" prop="soilThickness">
						    <el-input v-model="form.soilThickness" placeholder="土层厚度(cm)"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="灌草种类" prop="shrubType">
						    <el-input v-model="form.shrubType" placeholder="灌草种类"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="播种方法" prop="sowingType">
							<el-input v-model="form.sowingType" placeholder="播种方法"></el-input>
						</el-form-item>
						
					</el-col>
				</el-row>
				
				
			
				<el-row type="flex" justify="space-between">
				    <el-col :span="7">
						<el-form-item label="播种日期" prop="sowingDate">
						    <el-input v-model="form.sowingDate" placeholder="播种日期"></el-input>
						</el-form-item>
									 
					</el-col>
				    <el-col :span="7">
						<el-form-item label="生物量(kg/h㎡)" prop="biologyYield">
						    <el-input v-model="form.biologyYield" placeholder="生物量(kg/h㎡)"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="收割日期" prop="harvestDate">
						    <el-input v-model="form.harvestDate" placeholder="收割日期"></el-input>
						</el-form-item>
									 
					</el-col>
				</el-row>
				<el-row type="flex" justify="space-between">
				   
				    <el-col :span="7">
						<el-form-item label="牧草产量(kg/h㎡)" prop="grassYield">
						    <el-input v-model="form.grassYield" placeholder="牧草产量(kg/h㎡)"></el-input>
						</el-form-item>
						
					</el-col>
					<el-col :span="7">
						<el-form-item label="盖度(%)" prop="coverage">
						    <el-input v-model="form.coverage" placeholder="盖度  (%)"></el-input>
						</el-form-item>
									 
					</el-col>
					<el-col :span="7">
						<el-form-item label="平均高度(cm)" prop="avgHeight">
						    <el-input v-model="form.avgHeight" placeholder="平均高度(cm)"></el-input>
						</el-form-item>
						
					</el-col>
				</el-row>
				
				
             <el-row type="flex" justify="space-between">
                <el-col :span="7">
                	<el-form-item label="测流设备">
                	    <el-input v-model="form.flowDevice" placeholder="测流设备"></el-input>
                	</el-form-item>
                	
                </el-col>
             	<el-col :span="7">
             		<el-form-item label="备注" prop="remark">
             		    <el-input v-model="form.remark" placeholder="备注"></el-input>
             		</el-form-item>
             		
             	</el-col>
				<el-col :span="7">
					
					
				</el-col>
             </el-row>
            </el-form>
           
			<template #footer>
				<span  class="dialog-footer">
              
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
        </el-dialog>
    </div>
</template>

<script>


import { reorganizefieldviewselectReorganizeData,reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
viewPageStationInfo,rainfallImportRainfallDaily,reorganizelandviewlistShrubland, reorganizelandsaveaddShrubland, 
reorganizelandremovedelShrubland } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'zhengbianguancaomingxi',
    data() {
        return {
			status:'/',
			rules: {
			 
			  areaCode: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  purpose: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  slope: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  slopeLength: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  slopeWidth: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  areaSize: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  slopeAspect: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  slopeLocation: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  soilType: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  soilThickness: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  measure: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  landMethod: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  crop: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  sowingMethod: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  fertilizerRate: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  moundSpacing: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  plantRowSpacing: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  density: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  sowingDate: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  midFarmDate: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  harvestDate: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  foodYield: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  strawYield: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  flowDevice: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  biologyYield :[
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  grassYield:[
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  coverage:[
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  avgHeight:[
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  sowingType:[
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			},
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                year:moment().format('YYYY')
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               year:moment().format('YYYY')
            },
			stationData:[],
			checkArr:[],
			tijiaoform:{
				
			},
			selnow:{},
			xiaoqudata:[],
			stnm:this.$route.query.stnm
        };
    },
    created() {
		this.xiaoqudata=JSON.parse(sessionStorage.getItem('xiaoquxinxi'))
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        that.getData();
		this.getstationData()
		this.getjisuandata()
		
    },
    methods: {
		stcdChange(){
			let data=this.xiaoqudata.filter(item=>{
				return item.areaCode===this.form.areaCode
			})[0]
			this.form=JSON.parse(JSON.stringify(data))
			
		},
		daochu(){
			location.href=globalVar.jingliujiangyuUrl+`/soilWater/runoffField/reorganize/land/export/exportReorganizeData?headNo=${this.$route.query.recordNo}`
		},
		prepage(item){
			 this.$router.go(-1);
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		getjisuandata(){
			let that=this
			reorganizefieldviewselectReorganizeData({
				stcd:stationInfo.stcd,
				year:globalyear
			}).then(e=>{
				that.checkArr=e.object
			}).catch(err=>{
				console.log(err)
			})
		},
		shenpi(item){
			this.shenpilog=true
			this.selnow=item
			
		},
		getstationData() {
			let data={
				currentPage:1,
				pageSize:1000
			}
		    viewPageStationInfo(data).then((res) => {
		       
		        this.stationData = res.object.dataList.filter(item=>{
                    return item.stType==systype
                });
		       
		       
		    });
		},
		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData() {
			let data={
				headNo:this.$route.query.recordNo

			}
            reorganizelandviewlistShrubland(data).then((res) => {
               
                this.tableData = res.object;
               
                
            });
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    reorganizelandremovedelShrubland([row.detailNo] ).then((e) => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
        },
		chehui(row){
			
			this.$confirm('确定撤回吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditrevokeRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
		},
		
        tijiao(row){
			
			this.$confirm('确定提交吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditsubmitRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
			
		},
        // 编辑操作
        handleEdit(row) {
            this.form = row;
           
            this.logTitle = '编辑农地整编明细';
           
            this.editVisible = true;
        },
        handleAdd() {
            this.logTitle = '新增农地整编明细';
            this.form = {
               year:moment().format('YYYY')
            };
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            let that=this
			this.$refs['form'].validate((valid) => {
			  if (valid) {
				that.form.headNo=this.$route.query.recordNo
				 reorganizelandsaveaddShrubland([that.form]).then((e) => {
				     this.editVisible = false;
				     this.$message.success('操作成功');
				     this.getData();
				 });
			  } else {
				
				return false;
			  }
			});   
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

